<template>
  <div class="shop-page">
    <!-- 顶部搜索栏 -->
    <div class="top-search">
      <el-button type="primary" class="enter-btn">入驻</el-button>
      <span class="search-label">店铺名称：</span>
      <el-input
        v-model="shopName"
        placeholder="请输入店铺名称"
        suffix-icon="Search"
        class="search-input"
        @keyup.enter="handleSearch"
      />
    </div>

    <!-- 店铺卡片容器（一行最多3个） -->
    <div class="shop-card-wrapper">
      <div 
        class="shop-card" 
        v-for="(shop, idx) in shopList" 
        :key="idx"
        :class="{ collected: shop.collected }"
      >
        <!-- 卡片头部（状态 + 收藏） -->
        <div class="card-header">
          <el-tag 
            :class="shop.status === '营业中' ? 'status-online' : 'status-expired'"
            size="small"
          >
            {{ shop.status }}
          </el-tag>
          <el-icon 
            class="star-icon" 
            @click="toggleCollect(shop)"
          >
            <Star />
          </el-icon>
        </div>

        <!-- 卡片内容（Logo + 店铺信息） -->
        <div class="card-content">
          <el-image 
            :src="shop.logo" 
            class="shop-logo" 
            fit="cover"
          />
          <div class="shop-info">
            <h3 class="shop-title">{{ shop.name }}</h3>
            <p class="shop-desc">服务到期: {{ shop.expireTime }}</p>
            <p class="shop-desc">服务套餐: {{ shop.package }}</p>
            <!-- 平台标签 -->
            <div class="platform-tags">
              <span 
                v-for="(tag, tIdx) in shop.platformTags" 
                :key="tIdx"
                :class="`platform-tag tag-${tag.type}`"
                :title="getPlatformName(tag.type)"
              ></span>
            </div>
          </div>
        </div>

        <!-- 数据统计区 -->
        <div class="card-stats">
          <div class="stat-item" v-for="(stat, sIdx) in shop.stats" :key="sIdx">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Star, Search } from '@element-plus/icons-vue'

// 搜索关键词
const shopName = ref('')

// 店铺列表数据
const shopList = ref([
  {
    name: '一平云端',
    status: '营业中',
    logo: 'https://picsum.photos/100/100?random=1',
    expireTime: '2023-12-31 00:00:00',
    package: '至尊版',
    platformTags: [
      { type: 'orange' }, // 百
      { type: 'blue' }    // 淘
    ],
    stats: [
      { value: 15, label: '在售商品数(件)' },
      { value: 0, label: '会员数(人)' },
      { value: 0, label: '支付订单数(笔)' }
    ],
    collected: false
  },
  {
    name: '大雨',
    status: '营业中',
    logo: 'https://picsum.photos/100/100?random=2',
    expireTime: '2024-01-18 00:00:00',
    package: '至尊版',
    platformTags: [
      { type: 'orange' }, // 百
      { type: 'purple' }  // 京
    ],
    stats: [
      { value: 7, label: '在售商品数(件)' },
      { value: 6, label: '会员数(人)' },
      { value: 1, label: '支付订单数(笔)' }
    ],
    collected: false
  },
  {
    name: '阿玛尼',
    status: '营业中',
    logo: 'https://picsum.photos/100/100?random=3',
    expireTime: '2023-11-11 00:00:00',
    package: '至尊版',
    platformTags: [
      { type: 'orange' }, // 百
      { type: 'purple' }, // 京
      { type: 'blue' }    // 淘
    ],
    stats: [
      { value: 13, label: '在售商品数(件)' },
      { value: 65, label: '会员数(人)' },
      { value: 35, label: '支付订单数(笔)' }
    ],
    collected: false
  },
  {
    name: '香奈儿',
    status: '已过期',
    logo: 'https://picsum.photos/100/100?random=4',
    expireTime: '2023-10-25 00:00:00',
    package: '至尊版',
    platformTags: [
      { type: 'orange' }  // 百
    ],
    stats: [
      { value: 3, label: '在售商品数(件)' },
      { value: 987, label: '会员数(人)' },
      { value: 524, label: '支付订单数(笔)' }
    ],
    collected: false
  }
])

// 获取平台名称（用于标签提示）
const getPlatformName = (type) => {
  const map = {
    orange: '百度',
    blue: '淘宝',
    purple: '京东'
  }
  return map[type] || ''
}

// 搜索操作
const handleSearch = () => {
  ElMessage.info(`搜索店铺：${shopName.value}`)
}

// 切换收藏
const toggleCollect = (shop) => {
  shop.collected = !shop.collected
  ElMessage.success(shop.collected ? '已收藏' : '已取消收藏')
}
</script>

<style scoped>
.shop-page {
  padding: 30px;
  background-color: #f9fafc;
  min-height: 100vh;
}

/* 顶部搜索栏 */
.top-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  justify-content: flex-end;
  padding: 0 20px;
}

.enter-btn {
  background-color: #409eff;
  border-color: #409eff;
  padding: 8px 16px;
}

.search-label {
  color: #666;
  font-size: 14px;
}

.search-input {
  width: 240px;
}

/* 卡片容器：一行最多3个，居中布局 */
.shop-card-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* 卡片宽度增大到350px */
  gap: 30px; /* 间距增大 */
  max-width: 1140px; /* 3*350 + 2*30 = 1110，留余裕 */
  margin: 0 auto;
  padding: 0 20px;
}

/* 店铺卡片（增大尺寸+悬停动画） */
.shop-card {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all 0.3s ease; /* 动画过渡 */
  cursor: pointer;
}

/* 悬停动画效果 */
.shop-card:hover {
  transform: translateY(-5px); /* 上移5px */
  box-shadow: 0 10px 20px rgba(0,0,0,0.08); /* 阴影加深 */
  border-color: #e0e7ff; /* 边框变色 */
}

/* 收藏状态样式 */
.shop-card.collected {
  border-color: #409eff;
}

/* 卡片头部：状态 + 收藏 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

/* 状态标签样式 */
.status-online {
  background-color: #f0f9eb;
  color: #67c23a;
  border-color: #e1f3d8;
  padding: 3px 8px;
}
.status-expired {
  background-color: #fef0f0;
  color: #f56c6c;
  border-color: #fde2e2;
  padding: 3px 8px;
}

.star-icon {
  color: #c0c4cc;
  cursor: pointer;
  font-size: 20px;
  transition: color 0.3s;
}

.shop-card.collected .star-icon {
  color: #ffd700; /* 收藏后星星变黄 */
}

.star-icon:hover {
  color: #ffd700;
}

/* 卡片内容：Logo + 信息 */
.card-content {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: center;
}

.shop-logo {
  width: 100px; /* Logo尺寸增大 */
  height: 100px;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.shop-card:hover .shop-logo {
  transform: scale(1.05); /* 悬停时Logo轻微放大 */
}

.shop-info {
  flex: 1;
}

.shop-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px 0;
  transition: color 0.3s;
}

.shop-card:hover .shop-title {
  color: #409eff; /* 悬停时标题变色 */
}

.shop-desc {
  font-size: 14px;
  color: #909399;
  margin: 4px 0;
  line-height: 1.6;
}

/* 平台标签 */
.platform-tags {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.platform-tag {
  width: 18px; /* 标签尺寸增大 */
  height: 18px;
  border-radius: 50%;
  transition: transform 0.3s;
}

.shop-card:hover .platform-tag {
  transform: scale(1.2); /* 悬停时标签放大 */
}

.tag-orange {
  background-color: #ff6600;
}
.tag-blue {
  background-color: #409eff;
}
.tag-purple {
  background-color: #9073e7;
}

/* 数据统计区 */
.card-stats {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px dashed #f2f2f2;
}

.stat-item {
  text-align: center;
  flex: 1;
  transition: transform 0.3s;
}

.shop-card:hover .stat-item {
  transform: scale(1.05); /* 悬停时数据区放大 */
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

.stat-label {
  font-size: 13px;
  color: #909399;
  margin-top: 4px;
}
</style>